<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-14 14:15:30
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-12-15 09:45:42
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread" @click="fk">
        <i
          :class="[paymentShow == 2 ? 'active' : '']"
          class="iconfont icon-bianzu171"
        ></i>
        <span style="margin-left: 10px">公众号管理</span>
      </div>
      <div class="bread" style="margin-left: 20px" @click="fp">
        <i
          class="iconfont icon-bianzu22"
          :class="[paymentShow == 1 ? 'active1' : '']"
        ></i>
        <span style="margin-left: 10px">消息通知</span>
      </div>
    </div>
    <div v-if="paymentShow == 2">
      <binding-wx v-if="wxShow"></binding-wx>
      <wx-main v-else></wx-main>
    </div>
    <div v-else>
      <msg-notice></msg-notice>
    </div>
  </div>
</template>

<script>
import bindingWx from "./components/bindingWx.vue";
import MsgNotice from "./components/msgNotice.vue";
import WxMain from "./components/wxMain.vue";
export default {
  components: { bindingWx, WxMain, MsgNotice },
  data() {
    return {
      wxShow: true,
      paymentShow: 2,
    };
  },
  methods: {
    fk() {
      this.paymentShow = 2;
    },
    fp() {
      this.paymentShow = 1;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  border-bottom: 1px solid #ececec;
  .bread {
    margin-top: 20px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    line-height: 30px;
    i {
      font-size: 30px;
      color: #bdbdbd;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    margin: auto;
    margin-top: 16px;
    width: 340px;
    transform: translateX(-20%);
    /deep/ .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
    .el-button--primary {
      border-radius: 0 4px 4px 0;
    }
  }
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.active {
  color: #1172fb !important;
}
.active1 {
  color: #ff8e43 !important;
}
.ipt-el {
  width: 240px;
}
</style>